<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user';
import { useRoute, useRouter } from 'vue-router';

import { fetchGameDetail } from '@/api/game'
import BiNavBar from '@/components/bi-navbar/index.vue';

import GameWrapper from './components/gameWrapper.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const showGameDesc = ref(false)

const game = ref<any>({})
const handleFetchGameDetail = async () => {
    try {
        const gameId = route.query.gameId as string
        game.value = (await fetchGameDetail({
            device: userStore.device, 
            gameId: gameId
        })).data.data
    } catch (error) {
        throw new Error(error as string)
    }
}
handleFetchGameDetail()

const changeTaskClassName = (status: number) => {
    return status === 1 && 'finish'
}
const changeTaskStatusText = (status: number) => {
    return status === 1 ? 'Done' : 'Undone'
}

const handleToPlayGame = () => {
    window.location.href = `https://game.playmoregame.cc/biblegame/${game.value.gameFileName}/index.html?device=${userStore.device}&gameId=${route.query.gameId}`
}

</script>

<template>
    <BiNavBar :title="game.gameName" @click-left="router.back" />

    <GameWrapper :name="game.gameName" :logo="game.gameLogo" :play-number="game.gameNumber" :tags="game.gameTypeName?.split()" />

    <div class="game-card">
        <h3 class="game-title">Game Description</h3>
        <div class="game-content">
            <div class="game-content-description" :class="{ unfold: showGameDesc }">
                <div class="game-content-description_p">
                    <p v-text="game.gameDesc"></p>
                </div>
                <div class="game-content-description_arrow" @click="showGameDesc = !showGameDesc"></div>
            </div>
        </div>
    </div>

    <div class="game-card">
        <h3 class="game-title">Game Task</h3>
        <div class="game-content">
            <ul class="game-task">
                <li v-for="task in game.gameTask" :key="task.id">
                    <span class="task-name">{{ task.id }}. {{ task.taskStepDesc }}</span>
                    <span class="task-status" :class="changeTaskClassName(task.status)">
                        {{ changeTaskStatusText(task.status) }}</span>
                </li>
            </ul>
        </div>
    </div>

    <div style="width: 100%;height: 20vmin;">
        <!-- 占位，解决高度不够任务列表显示不全的问题 -->
    </div>

    <div class="game-button" @click="handleToPlayGame">
        <span>PLAY NOW</span>
    </div>

</template>

<style scoped lang="scss">
@import url(./game.scss);
</style>